<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<h3>动物解刨虚拟仿真实训管理平台</h3>
				<el-dropdown size="medium" @command="handleCommand" trigger="click" style="color: #fff;cursor: pointer">
					<span class="el-dropdown-link">
					  {{user.userName}} , 您好
						 <el-icon class="el-icon--right">
							<arrow-down />
						  </el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="change">修改密码</el-dropdown-item>
							<el-dropdown-item command="quit">退 出</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</el-header>
			<el-container>
				<el-aside width="200px" style="display: flex;justify-content: center">
					<el-menu
							default-active="/classManagement"
							style="width: 180px"
							background-color="#fff"
							text-color="#000"
							router
							>
						<el-menu-item v-for="(item,index) in routeList" :key="index" :index="'/' + item.path" >
							<span>{{item.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main style="background-color: #f8f5ff">
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
		
	</div>
	<el-dialog
			v-model="dialogVisible"
			title="修改密码"
			width="20%"
			center
			:show-close="false"
	>
		<el-form ref="ruleFormRef" :model="passData" :rules="rules">
			<el-form-item prop="passWord">
				<el-input v-model="passData.passWord" :prefix-icon="Lock" placeholder="请输入旧密码" />
			</el-form-item>
			<el-form-item prop="newPass">
				<el-input v-model="passData.newPass" :prefix-icon="Lock" placeholder="请输入新密码" />
			</el-form-item>
			<el-form-item prop="checkPwd">
				<el-input v-model="passData.checkPwd" :prefix-icon="Lock" placeholder="请再次输入新密码" />
			</el-form-item>
		</el-form>
		<template #footer>
		  <span class="dialog-footer">
			<el-button type="primary" style="width: 100%" @click="submitForm(ruleFormRef)">确 定</el-button>
      </span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import {ref,reactive,onBeforeMount} from 'vue'
    import { ArrowDown } from '@element-plus/icons-vue'
    import { Lock } from '@element-plus/icons-vue'
    import {ElMessage, ElMessageBox, ElNotification, FormInstance, FormRules} from 'element-plus'
    import {quitLogin, changePassword} from "../api/loginMoudles";
	import {useRouter} from "vue-router";
	const route = useRouter()
    let dialogVisible = ref<boolean>(false)
    interface routerData{
        id:number,
        name:string,
        path:string
	}
	const user = JSON.parse(sessionStorage.getItem('user'))
	let routeList
    onBeforeMount(() => {
		if (user.roleFlag === 1){
		    routeList =  reactive<routerData[]>([
                {
                    id:1,
                    name:'班级管理',
                    path:'classManagement'
                },
                {
                    id:2,
                    name:'学生管理',
                    path:'studentManagement'
                },
                {
                    id:3,
                    name:'教师管理',
                    path:'teacherManagement'
                },
                {
                    id:4,
                    name:'学校管理',
                    path:'schoolManagement'
                }
            ])
		}else {
            routeList =  reactive<routerData[]>([
                {
                    id:1,
                    name:'班级管理',
                    path:'teacher'
                }
            ])
		}
    });
    const handleCommand = (command: string | number | object) => {
		if (command === 'quit'){
            ElMessageBox.confirm(
                '确定注销当前账户吗?',
                '提 示',
                {confirmButtonText: '退出', cancelButtonText: '取消', type: 'warning',}
            )
                .then(() => {
                     quitLogin().then(res => {
						 if (res.data.statusCode === 200){
                             ElNotification({
                                 title: '提 示',
                                 message: '注销成功!',
                                 type: 'success',
                             })
                             sessionStorage.clear()
							 route.replace('/')
						 }
					 })
                
                })
                .catch(() => {
                    ElNotification({
                        title: '提 示',
                        message: '已取消注销!',
                        type: 'warning',
                    })
                })
		} else {
            dialogVisible.value = true
		}
    }
    interface passData{
        passWord:string,
        newPass:string,
        checkPwd:string,
	}
    const passData = reactive<passData>({
        passWord: '',
        newPass: '',
        checkPwd: ''
    })
    const confirmPassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入新密码'));
        } else if (value !== passData.newPass) {
            callback(new Error('两次输入的密码不一致'));
        } else {
            callback();
        }
    };
    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules<passData>>({
        passWord: [
            { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPass: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '新密码长度不能少于6位', trigger: 'blur' }
        ],
        checkPwd: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: confirmPassword, trigger: 'blur' }
        ]
    })
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
               changePassword(passData).then(res => {
				   if (res.data.statusCode === 200){
                       ElNotification({
                           title: '提示',
                           message: '修改成功',
                           type: 'success',
                       })
                       sessionStorage.clear()
                       route.replace('/')
				   }
			   })
            
            }
        })
    }
   
</script>

<style scoped lang="less">
	.common-layout{
		width: 100%;
		height: 100%;
		.el-container{
			width: 100%;
			height: 100%;
			.el-header{
				background-image: linear-gradient(to left, #c187c0 0%, #c187c0 1%, #c187c0 100%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				h3{
					color: #ffffff;
					letter-spacing: 2px;
				}
			}
			.el-aside{
				height: 100%;
				
				.el-menu{
					height: 100%;
					padding-top: 30px;
					box-sizing: border-box;
					border-right: none;
					.el-menu-item{
						justify-content: center;
						border-radius: 30px;
						margin-bottom: 15px;
					}
					/deep/ .is-active{
						color: #fff;
						background-image: linear-gradient(to left, #63c1fd 0%, #aaaeef 50%, #fb98df 100%);
					}
				}
			}
		}
	}
</style>
